<template>
  <div class="detail">
    <div class="detail-header" v-show="headerShow">
      <div @click="goBack"><img src="@/assets/images/left.png" alt="" /></div>
      <div><img src="@/assets/images/home.png" alt="" /></div>
    </div>
    <div class="detail-header-nav" v-show="!headerShow">
      <div class="detail-header-nav-img">
        <img src="@/assets/images/left.png" alt="" />
      </div>
      <div class="detail-header-nav-bar active">商品详情</div>
      <div class="detail-header-nav-bar">商品评价</div>
      <div class="detail-header-nav-img">
        <img src="@/assets/images/home.png" alt="" />
      </div>
    </div>
    <div class="wrapper" ref="wrapper">
      <Swiper :swiperList="swiperList"></Swiper>
      <div class="detail-main">
        <div>
          <div class="detail-name">{{ dataInfo.name }}</div>
          <div class="detail-sub-name">{{ dataInfo.title }}</div>
        </div>
        <div class="detail-price">
          <div class="detai-price-m">
            <span>￥</span>
            <span class="detail-price-s">{{ dataInfo.price }}</span>
          </div>
          <span class="detail-sm">/</span>
          <span>{{ dataInfo.wt }}</span>
          <div class="detail-price-p">
            价格：<span class="detail-price-hs"
              >￥{{ dataInfo.historyPrice }}</span
            >
          </div>
        </div>
      </div>
      <div class="detail-coupon">
        <div class="detail-coupon-m">
          <span>优惠券</span>
          <div class="detail-coupon-list">
            <Coupon price="10" limitPrice="60"></Coupon>
            <Coupon price="20" limitPrice="100"></Coupon>
          </div>
          <div class="detail-coupon-more">
            <span>共4张</span>
            <img src="@/assets/images/right-s.png" alt="" />
          </div>
        </div>
        <div class="detail-sevc">
          <span>服务</span>
          <div>
            <img src="@/assets/images/complete.png" alt="" />
            满99元包邮
          </div>
          <div>
            <img src="@/assets/images/complete.png" alt="" />
            48小时发货
          </div>
        </div>
      </div>
      <div style="height: 1000px"></div>
    </div>
    <Footer :id="id"></Footer>
  </div>
</template>

<script>
import BetterScroll from "better-scroll";
import Swiper from "@/views/detail/components/Swiper.vue";
import Footer from "@/views/detail/components/Footer.vue";

export default {
  name: "detail",
  components: {
    Swiper,
    Footer,
  },
  data() {
    return {
      headerShow: true,
      bs: null,
      swiperList: [
        {
          id: 1,
          imgUrl: "./images/detail-swiper1.jpeg",
        },
        {
          id: 2,
          imgUrl: "./images/detail-swiper2.jpeg",
        },
        {
          id: 3,
          imgUrl: "./images/detail-swiper3.jpeg",
        },
      ],
      dataInfo: {
        // name: "武夷山灰芽花香金骏眉3号",
        // title: "全芽采摘，特色是香气浓，口感偏向清甜类型，适合简单泡饮",
        // price: 128,
        // historyPrice: 218, //可以存个历史价格表 取最新的历史价格
        // wt: "150g",
        // imgList: [],
        // commentList: [],
      },
      id: '',
    };
  },
  methods: {
    goBack(){
      this.$router.back()
    },
    async getData(){
      let res = await this.$http.getGoodById(this.id);
      if (res.code == 200) {
        this.dataInfo = res.data
      }
    }
  },
  activated () {
    if(this.id != this.$route.query.id){
      this.getData();
      this.id = this.$route.query.id;
    }
  },
  created () {
    this.id = this.$route.query.id;
    this.getData()
  },
  mounted() {
    // this.bs = new BetterScroll(this.$refs.wrapper, {
    //   probeType: 3,
    //   click: true,
    //   bounce: false,
    // });

    // this.bs.on("scroll", (position) => {
    //   console.log(position);
    //   let posY = Math.abs(position.y);
    //   if (posY >= 50) {
    //     this.headerShow = false;
    //   }
    //   {
    //     this.headerShow = true;
    //   }
    // });
  },
};
</script>

<style lang="scss" scoped>
.detail {
  background-color: #fff;
  position: relative;
  padding-bottom: 1.3067rem;

  .detail-header {
    position: fixed;
    display: flex;
    justify-content: space-between;
    padding: 0.1333rem;
    top: 0.1333rem;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 1.1733rem;

    div {
      background-color: rgba(0, 0, 0, 0.3);
      width: 0.9067rem;
      height: 0.9067rem;
      border-radius: 0.9067rem;
      line-height: 0.9067rem;
      text-align: center;

      img {
        width: 60%;
      }
    }
  }
  .detail-header-nav {
    background-color: #fff;
    position: fixed;
    display: flex;
    justify-content: space-between;
    padding: 0.1333rem;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 1.1733rem;
    border-bottom: 1px solid #e1e1e1;

    .detail-header-nav-img {
      background-color: rgba(0, 0, 0, 0.3);
      width: 0.9067rem;
      height: 0.9067rem;
      border-radius: 0.9067rem;
      line-height: 0.9067rem;
      text-align: center;

      img {
        width: 60%;
      }
    }
    .detail-header-nav-bar {
      font-size: 0.4267rem;
      height: 100%;
      vertical-align: middle;
      margin: 0.16rem 0 0;
    }
    .active {
      border-bottom: 2px solid #dd2727;
    }
  }

  .detail-main {
    padding: 0.32rem 0.2667rem 0.1333rem;
    border-bottom: 1px solid #e1e1e1;

    .detail-name {
      font-size: 0.5333rem;
    }
    .detail-sub-name {
      font-size: 0.3733rem;
      color: #999;
      padding: 0.2133rem 0;
      border-bottom: 1px solid #e1e1e1;
    }

    .detail-price {
      font-size: 0.4267rem;
      color: #999;

      .detai-price-m {
        display: inline-block;
        color: #d22531;

        .detail-price-s {
          font-size: 0.7467rem;
        }
      }

      .detail-sm {
        padding: 0 0.1333rem;
      }

      .detail-price-p {
        padding: 0.1333rem 0;

        .detail-price-hs {
          text-decoration: line-through;
        }
      }
    }
  }

  .detail-coupon {
    border-top: 10px #f4f4f4 solid;
    border-bottom: 10px #f4f4f4 solid;

    .detail-coupon-m {
      display: flex;
      justify-content: space-between;
      font-size: 0.3733rem;
      color: #999;
      padding: 0.4rem 0.2667rem;
      border-bottom: 1px solid #e1e1e1;

      span {
        width: 1.12rem;
      }

      .detail-coupon-list {
        display: flex;
        justify-content: space-around;
        flex: 1;
      }

      .detail-coupon-more {
        width: 1.6rem;
        display: flex;

        img {
          width: 39%;
          height: 39%;
        }
      }
    }

    .detail-sevc {
      font-size: 0.3733rem;
      display: flex;
      align-items: center;
      height: 1.3333rem;
      line-height: 1.3333rem;
      padding: 0.4rem 0.2667rem;

      span {
        color: #999;
      }

      div {
        display: flex;
        align-items: center;
        padding: 0 0.2667rem;

        img {
          width: 0.5333rem;
        }
      }
    }
  }
}
</style>